<template id="MonitorTable">
  <div class="MonitorTable">
    <FOURCONCOR />
    <i class="close" @click="changeBoxShow"></i>
    <PaddingCom :title="'监控管理'" :imgsrc="'topltip.png'">
      <LIST  :list="topList" @errorUrl="errorUrl" v-if="topList.length"/>
      <p v-if="!topList.length" style="text-align:center;width:100%;padding:3.5vw 0">暂无数据...</p>
    </PaddingCom>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingComBig";
import LIST from "components/listable/list.vue";
import FOURCONCOR from "components/fourCorner";
import { topcameralist, preview } from "api/zyy";
export default {
  name: "MonitorTable",
  components: { PaddingCom, LIST, FOURCONCOR },
  // 定义属性
  data() {
    return {
      topList: [
// {
//         name:"",
//         image:"",
//         data:{
//         url:""
//         }
//       },{
//         name:"",
//         image:"",
//         data:{
//         url:""
//         }
//       },{
//         name:"",
//         image:"",
//         data:{
//         url:""
//         }
//       },{
//         name:"",
//         image:"",
//         data:{
//         url:""
//         }
//       },{
//         name:"",
//         image:"",
//         data:{
//         url:""
//         }
//       }

      ],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取大屏底部监控
    async getTopCameralist() {
      let res = await topcameralist();

      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
      //  this.topList = [{
      //     id:0,
      //     image:'',
      //     data:{
      //       url:''
      //     }
      //   },{
      //     id:0,
      //     image:'',
      //     data:{
      //       url:''
      //     }
      //   },{
      //     id:0,
      //     image:'',
      //     data:{
      //       url:''
      //     }
      //   },{
      //     id:0,
      //     image:'',
      //     data:{
      //       url:''
      //     }
      //   },{
      //     id:0,
      //     image:'',
      //     data:{
      //       url:''
      //     }
      //   }]
          list.length && this.getVideoUrl(list);
      }
    },

    getVideoUrl(list) {
      //根据使用场景按需处理
      //先把所有请求返回的数据使用new Promise来异步处理,把返回来的数据按照顺序存放在一个atemp数组中
      var that = this;
      const atemp = [];
      that.topList = [];
      for (let i = 0; i < list.length; i++) {
        atemp.push(
          // 使用Promise用于异步计算
          new Promise((resolve, reject) => {
            var formData = new FormData();
            formData.append("indexCode", list[i].index_code);
            //queryList[i]是请求参数
            preview(formData)
              .then((res) => {
                // res.index_code = list[i].index_code;
                // res.name = list[i].name;
                res = { ...res, ...list[i] };
                return resolve(res);
              })
              .catch((err) => {
                return reject(err);
              });
          })
        );
      }
      // 使用Promise.all把所有请求数据atemp数组拿到之后,一起进行处理
      //使用方法大致如此,思路大概这样,根据个人返回来数据按需处理,我这里的数据没有截取全
      Promise.all(atemp)
        .then((res) => {
          res.forEach((ele) => {
            if (ele.errno == 0) {
              that.topList.push(ele);
            }
            // ele.data.data.forEach((ele) => {
            //   if (ele.status === "FINISH") {
            //     count++;
            //   }
            // });
            // this.planNum.push(ele.data.total);
            // lineChartData.order.expectedData = this.planNum;
            // this.actualNum.push(count);
            // lineChartData.order.actualData = this.actualNum;
          });
        })
        .catch((err) => {
          //console.log("error", err);
        });
    },
    errorUrl(n) {
      if (n.type == "error") {
        this.topList.length &&
          this.topList.map((item, i) => {
            if (item.data.url == n.videourl) {
              item.data.url = "";
            }
          });
      }
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 调用大屏底部监控
        this.getTopCameralist();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.MonitorTable {
  position: relative;
  padding: 0.3vw 1vw;
  width: 100%;
  background: rgba(11, 58, 113, 0.9);
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
  }
  .txt{
    top:-0.3vw;
  }
}
</style>
